<template>
  <el-dialog
    title="运费明细"
    :modelValue="modelValue"
    align-center
    width="936px"
    class="public-dialog"
    @close="handleClose"
    :close-on-click-modal="false"
  >
    <div class="text-[14px] text-[var(--base-text-color)] leading-[20px] mr-[32px]">
      入仓时间：{{ data?.['entry_warehouse_time'] || '-' }}
    </div>
    <div v-if="id" class="flex flex-wrap my-[16px]">
      <div
        class="text-[14px] text-[var(--base-text-color)] leading-[20px] mr-[32px]"
        v-for="item in headInfo"
        :key="item.label"
      >
        <span>{{ item.label }}：</span>
        <span>{{ getLabel(data?.[item.field]) }}</span>
      </div>
    </div>
    <vxe-grid ref="tableRef" v-bind="tableOptions" />
    <template #footer>
      <div class="dialog-button">
        <el-button @click="handleClose(false)"> 关闭 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="jsx">
import { transportCostDetail } from '../../api'

const props = defineProps({
  modelValue: { type: Boolean, default: true },
  id: { type: [String, Number, Object], default: '' },
  billsId: { type: [String, Number], default: '' },
  data: { type: Object, default: () => ({}) },
})

const headInfo = [
  { label: '渠道', field: 'channel_name' },
  { label: '物流单号', field: 'tracking_number' },
  { label: '备库单号', field: 'initial_backup_order_number' },
]

const emit = defineEmits(['update:modelValue', 'close'])

const tableRef = ref()

watch(
  () => props.id,
  val => {
    nextTick(() => {
      if (!val || !props.modelValue) return
      tableRef.value?.commitProxy?.('query')
    })
  },
  { immediate: true, deep: true }
)

const isArray = val => Object.prototype.toString.call(val) === '[object Array]'

const getLabel = e => {
  if (isArray(e)) {
    return e.join(',')
  }
  return e
}

const tableOptions = reactive({
  pagerConfig: { pageSize: 20 },
  round: true,
  height: '400',
  columnConfig: {
    resizable: true,
  },
  columns: [
    { title: '国家', fixed: 'left', width: 50, field: 'destination_country' },
    { title: '目的仓', fixed: 'left', minWidth: 120, field: 'warehouse' },
    { title: '费用名称', fixed: 'left', minWidth: 120, field: 'cost_label' },
    { title: "付款主体", width: 100, field: "pay_main_company_name" },
    { title: '票数', width: 60, field: 'vote_num' },
    { title: '件数', width: 60, field: 'item_num' },
    { title: '币种', width: 60, field: 'bill_currency' },
    { title: '数量', width: 60, field: 'total_num' },
    { title: '单价(CNY)', width: 120, field: 'unit_price' },
    { title: '原币金额', width: 120, field: 'cost_value' },
    { title: '金额(CNY)', width: 120, field: 'cost_value_cny' },
    { title: '备注', width: 200, field: 'remark' },
  ],
  proxyConfig: {
    autoLoad: false, // 是否自动加载查询数据
    props: {
      result: 'data',
      total: 'total',
    },
    ajax: {
      query: () => {
        const { billsId = '', id = '' } = props || {}
        return transportCostDetail({
          finance_initial_bills_detail_id: id,
        })
      },
    },
  },
})

const handleClose = () => {
  emit('update:modelValue', false)
  emit('close')
}
</script>
